<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                /* flex-flow: column wrap; */
                flex-direction: column;
                justify-content: space-between;
                height: 100vh;
            }
            div.hearder,
            div.bottom {
                height: 80px;
            }
            div.body {
                display: flex;
                flex-grow: 1;
            }
            .hearder {
                background: red;
            }
            .bottom {
                background-color: yellow;
            }
            .left {
                background-color: green;
                order: -1;
                width: 200px;
            }
            .right {
                width: 200px;
                background-color: #add8e6;
            }
            .main {
                background-color: #808080;
                flex-grow: 1;
            }
            .textCenter {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="hearder textCenter">头部</div>
        <div class="body">
            <div class="main textCenter">主体部分</div>
            <div class="left textCenter">导航</div>
            <div class="right textCenter">侧栏</div>
        </div>
        <div class="bottom textCenter">底部</div>
    </body>
</html>
